<template>
      <el-card style="max-width: 100%">
    <el-form inline="inline">
      <el-form-item label="一级分类">
        <!-- <el-select placeholder="请选择"  style="width: 240px" :v-model="catelist.id">
          <el-option v-for="item in catelist" :key="item.id" :label="item.name" :value="item.id"></el-option>
         
        </el-select> -->
        <el-select v-model="categoryStore.c1Id" placeholder="Select" style="width: 240px" @change="handler" :disabled="scene"> 
      <el-option
        v-for="item in categoryStore.c1Arr"
        :key="item.id"
        :label="item.name"
        :value="item.id"
      />
    </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        
          <el-select placeholder="请选择"  style="width: 240px" v-model="categoryStore.c2Id" :disabled="scene" @change="handle1r">
          <el-option v-for="item in categoryStore.c2Arr" :key="item.value" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <el-select placeholder="请选择"  style="width: 240px" :disabled="scene" v-model="categoryStore.c3Id"  >
          <el-option v-for="item in categoryStore.c3Arr" :key="item.value" :label="item.name" :value="item.id"></el-option>
         
        </el-select>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup lang="ts">
import { onMounted, ref,defineProps } from 'vue';
import  useCategoryStore  from "@/stores/module/category";
defineProps(['scene'])
const categoryStore=useCategoryStore()
onMounted(()=>{
    getcategoryStore()

})

const getcategoryStore=()=>{
  
   categoryStore.getC1()
  
  

}
const handler=()=>{
    categoryStore.c2Id=''
     categoryStore.c2Arr=''
    categoryStore.c3Id=''
     categoryStore.c3Arr=''
    categoryStore.getC2();


}
const handle1r=()=>{
    categoryStore.c3Id=''
     categoryStore.c3Arr=''
   
    categoryStore.getC3();


}
</script>
<style scoped>
</style>